<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Simple Agile Planning Board</title>
<style>
    
	body { 
		font-family:"Helvetica Neue",
		Helvetica, 
		Arial, 
		sans-serif; 
	}
	
    #board { 
		width: 910px; 
		min-height:100px; 
		position:relative; 
	}

    .title { 
		background-color:#52460a; 
		text-align:center; 
		color:white; 
		padding: 2px 0px; 
	}

    #inprogress { 
		left:302px; 
	}
	
    #done { 
		left:604px; 
	}

    #todo, #inprogress, #done { 
		background-color: tan; 
		position:absolute; 
		width: 300px; 
		min-height:150px; 
		border: 2px solid black; 
	}

    *[draggable=true] { float:left;
		min-width: 50px;
		min-height: 50px; b
		order: 2px solid black;
		margin: 10px;
		font-weight:bold;
		min-height:60px;
		background-image: -webkit-gradient(
			linear,
			left top, 
			left bottom,
			color-stop(
				0.63, 
				white
			),
			color-stop(
				0.92, 
				rgb(
					5,
					161,
					245
				)
			)
		);
		background-image:-moz-linear-gradient(
			center top,
			white 63%,
			rgb(
				5,
				161,
				245
			) 92%
		);
						-webkit-background-size:1px 8px;
						-moz-background-size:1px 8px;
						background-size:1px 8px;
						background-repeat:repeat;
    }

    .cardTitle { background-color: rgb(255,255,255); border:2px solid white; }
</style>
<body>
 ID of target: <span class="display"></span>
    <div id="board">
        <div id="todo">
         <div class="title">To Do</div>
        <div id="item1" draggable="true">
            <div class="cardTitle">
                Learn HTML5
            </div>
        </div>
        <div id="item2" draggable="true">
            <div class="cardTitle">
                Learn CSS3
            </div>
        </div>
         <!--<div id="item3" draggable="true">Make an amazing site</div>
<div id="item4" draggable="true">Impress my friends</div>-->
        </div>
<div id="inprogress">
<div class="title">In Progress</div>
</div>

<div id="done">
<div class="title">Done</div>
</div>


        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
        </script>

<script type="text/javascript">
$('document').ready(init);

        function init(){
            $('#item1, #item2').bind('dragstart', function(event) {
                event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
            });

$(function() {
    $(".droppable").droppable({
        drop: function(event, ui) {
            $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
        },
        over: function(event, ui) {
            $('.display').html( this.id );
        }
    });
});

   // bind the dragover event on the board sections
            $('#todo, #inprogress, #done').bind('dragover', function(event) {
                event.preventDefault();
            });

// bind the drop event on the board sections
   $('#todo, #inprogress, #done').bind('drop', function(event) {
            var notecard = event.originalEvent.dataTransfer.getData("text/plain");
            event.target.appendChild(document.getElementById(notecard));
// Turn off the default behaviour
// without this, FF will try and go to a URL with your id's name
            event.preventDefault();
});
        }
</script>
</body>
</html>
